<template>
	<el-main>
		<el-card class="box-card" shadow="never">
			<div class="search-box">
				<el-form :model="searchForm" label-width="80px">
					<el-form-item label="状态">
						<el-button-group>
							<el-button :type="buttonType('status', 0)" @click="checkTab(0)">全部</el-button>
							<el-button :type="buttonType('status', 1)" @click="checkTab(1)">进行中</el-button>
							<el-button :type="buttonType('status', 2)" @click="checkTab(2)">已作废</el-button>
							<el-button :type="buttonType('status', 3)" @click="checkTab(3)">已过期</el-button>
							<el-button :type="buttonType('status', 4)" @click="checkTab(4)">已领完</el-button>
						</el-button-group>
					</el-form-item>
				</el-form>
				<el-form :inline="true" :model="searchForm" class="demo-form-inline" label-width="80px">
					<el-form-item label="优惠券名">
						<el-input v-model="searchForm.name" placeholder="" clearable></el-input>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="onSubmit" icon="el-icon-search">查询</el-button>
					</el-form-item>
				</el-form>
			</div>
			<div style="width:100%;height:0;border-bottom:#E4E7ED 1px dashed;margin-bottom: 10px"></div>
			<el-button type="primary" icon="el-icon-plus" @click="addCoupon" style="margin-top: 10px">添加优惠券
			</el-button>
			<div style="width:100%;height:0;border-bottom:#E4E7ED 1px dashed;margin-top: 15px"></div>
			<el-table
				:data="tableData"
				style="width: 100%;">
				<el-table-column
					prop="id"
					width="100px"
					label="ID">
				</el-table-column>
				<el-table-column
					prop="name"
					label="名称">
				</el-table-column>
				<el-table-column
					label="类型">
					<template #default="scope">
						<el-tag type="success" v-if="scope.row.type == 1">满减券</el-tag>
						<el-tag v-if="scope.row.type == 2">折扣券</el-tag>
					</template>
				</el-table-column>
				<el-table-column
					width="110"
					label="优惠金额/折扣">
					<template #default="scope">
						<span v-if="scope.row.type == 1">{{ scope.row.amount }}</span>
						<span v-if="scope.row.type == 2">{{ scope.row.discount }}</span>
					</template>
				</el-table-column>
				<el-table-column
					label="领取上限">
					<template #default="scope">
						{{ scope.row.max_receive_num }}张/人
					</template>
				</el-table-column>
				<el-table-column
					prop="total_num"
					label="发放数量">
				</el-table-column>
				<el-table-column
					prop="received_num"
					label="已领数量">
				</el-table-column>
				<el-table-column
					width="400"
					label="有效期">
					<template #default="scope">
						<span v-if="scope.row.validity_type == 1">{{ scope.row.start_time }} / {{ scope.row.end_time }}</span>
						<span v-else>领取之日后 {{ scope.row.receive_useful_day }} 天</span>
					</template>
				</el-table-column>
				<el-table-column
					label="状态">
					<template #default="scope">
						<el-tag v-if="scope.row.status == 1">进行中</el-tag>
						<el-tag v-if="scope.row.status == 2" type="danger">已作废</el-tag>
						<el-tag v-if="scope.row.status == 3" type="primary">已过期</el-tag>
						<el-tag v-if="scope.row.status == 4" type="success">已领完</el-tag>
					</template>
				</el-table-column>
				<el-table-column
					prop="operation"
					label="操作"
					fixed="right"
					width="230px">
					<template #default="scope">
						<el-button @click="handleView(scope.row)" type="text" size="small">查看</el-button>
						<el-button @click="handleLog(scope.row)" type="text" size="small">领取记录</el-button>
						<el-button @click="handleClose(scope.row)" type="text" size="small" v-if="scope.row.status != 2">作废</el-button>
					</template>
				</el-table-column>
			</el-table>
			<Pages :form="searchForm" :page-obj="page" @pageChange="handlePageChange" @pageJump="getList"></Pages>

		</el-card>
	</el-main>

	<save-dialog v-if="dialogVisible" ref="saveDialog" @success="handleSuccess" @closed="dialogVisible=false"
				 :close-on-click-modal="false"></save-dialog>

	<!-- 领取日志 -->
	<el-dialog title="领取日志" v-model="logDialogVisible" width="800px" destroy-on-close :close-on-click-modal="false">
		<el-table
			:data="logTableData"
			style="width: 100%">
			<el-table-column
				prop="id"
				label="ID">
			</el-table-column>
			<el-table-column
				prop="user_name"
				label="领取人">
			</el-table-column>
			<el-table-column
				prop="create_time"
				label="领取时间">
			</el-table-column>
		</el-table>
		<Pages :form="logSearchForm" :page-obj="logPage" @pageChange="handleLogPageChange" @pageJump="getReceiveLog"></Pages>

	</el-dialog>
</template>

<script>
import saveDialog from './save'
import Pages from "@/components/pages/index.vue";

export default {
	components: {
		Pages,
		saveDialog
	},
	data() {
		return {
			searchForm: {
				name: '',
				status: 0,
				limit: 15,
				page: 1
			},
			title: '新增优惠券',
			page: {
				total: 0
			},
			logPage: {
				total: 0
			},
			tableData: [],
			dialogVisible: false,
			logDialogVisible: false,
			logTableData: [],
			logSearchForm: {
				id: 0,
				limit: 15,
				page: 1
			},
			nowId: 0
		}
	},
	mounted() {
		this.getList()
	},
	methods: {
		// 获取优惠券列表
		async getList() {
			let res = await this.$API.coupon.list.get(this.searchForm)
			this.tableData = res.data.data
			this.page.total = res.data.total
		},
		// 获取领取日志列表
		async getReceiveLog() {
			let res = await this.$API.coupon.log.get(this.logSearchForm)
			this.logTableData = res.data.list
			this.logPage.total = res.data.total
		},
		onSubmit() {
			this.getList()
		},
		// 添加优惠券
		addCoupon() {
			this.dialogVisible = true
			this.$nextTick(() => {
				this.$refs.saveDialog.open('add')
			})
		},
		// 翻页
		handlePageChange(row) {
			this.searchForm.page = row
			this.getList()
		},
		// 领取日志翻页
		handleLogPageChange(row) {
			this.logSearchForm.page = row
			this.getReceiveLog()
		},
		// 查看
		handleView(row) {
			this.dialogVisible = true
			this.$nextTick(() => {
				this.$refs.saveDialog.open('show').setData(row)
			})
		},
		// 领取日志
		handleLog(row) {
			this.logDialogVisible = true
			this.logSearchForm.id = row.id

			this.getReceiveLog()
		},
		// 作废优惠券
		handleClose(row) {
			this.$confirm("确定作废该优惠券？", "提示", {
				confirmButtonText: "确定",
				cancelButtonText: "取消",
				type: "warning",
			}).then(async () => {
				let res = await this.$API.coupon.close.get({
					id: row.id,
				});
				if (res.code == 0) {
					this.$message.success(res.msg);
					setTimeout(() => {
						this.getList();
					}, 500);
				} else {
					this.$message.error(res.msg);
				}
			}).catch(() => {});
		},
		checkTab(status) {
			this.searchForm.status = status
			this.searchForm.page = 1
			this.getList()
		},
		// 选择样式
		buttonType(field, type) {
			if (field == 'status') {
				if (this.searchForm.status == type) {
					return 'primary'
				}
			}
		},
		handleSuccess() {
			this.dialogVisible = false
			this.getList()
		}
	}
}
</script>

<style scoped>
p {
	padding: 0;
	margin: 0;
}

.el-table__header tr,
.el-table__header th {
	padding: 0;
	height: 20px;
	line-height: 20px;
}

.del-btn {
	cursor: pointer;
	color: #F56C6C
}

.add-btn {
	cursor: pointer;
	margin-top: 18px;
	color: #409EFF
}
.primary {
	color: #FFF;
	background-color: #409EFF;
	border-color: #409EFF;
}
.el-button--small {
	padding: 0 !important;
}
</style>
